import  { Component } from 'react';
import Taro from '@tarojs/taro';
import { View, Canvas } from '@tarojs/components'
import dayjs from 'dayjs'
const fmPic = 'https://static3.jekunauto.com/img/others/fm.png'
const kxPic = 'https://static3.jekunauto.com/img/others/kx.png'
const xxPic = 'https://static3.jekunauto.com/img/others/xx.png'
const ymPic = 'https://static3.jekunauto.com/img/others/ym.png'
import './index.scss'

interface State {}
interface Props {
    info: any
    selectDate: any
}

export default class Qualifying extends Component<Props> {
    constructor(props) {
        super(props)
        let { info, selectDate } = this.props
        if (this.props.info) {
            info = this.props.info
            selectDate = this.props.selectDate
        }
        this.mapSelect[`day-${selectDate}`] = {
            selectDate,
            info
        }
        this.currData = this.mapSelect[`day-${selectDate}`]
        this.state = {}
    }
    state: State

    componentDidMount() {
        this.initCanvas()
    }

    UNSAFE_componentWillReceiveProps(nextProps, nextContext) {
        // console.log(nextProps)
        const { info, selectDate } = nextProps
        if (!this.mapSelect[`day-${selectDate}`]) {
            this.mapSelect[`day-${selectDate}`] = {
                selectDate,
                info
            }
        }
        this.currData = this.mapSelect[`day-${selectDate}`]
        // console.log(this.currData, this.mapSelect)
        this.drawCanvas()
    }
    drawCanvas() {
        const { xx } = this.imgs
        const { selectDate } = this.currData
        const dayFormat = dayjs(selectDate).format('YYYY-MM-DD')
        const { info } = this.currData
        const startTimeLine = dayjs(dayFormat).hour(8).valueOf()
        const endTimeLine = dayjs(dayFormat).hour(20).valueOf()
        // console.log(dayFormat, dayjs(dayFormat).hour(8), dayjs(dayFormat).hour(20))
        const diffTimeLong = endTimeLine - startTimeLine
        this.imgUnit = this.drawWidth / diffTimeLong
        this.ctx.clearRect(0, 0, this.drawWidth, this.drawHeight)
        // 休息时间轴
        // console.log(this.imgUnit * diffTimeLong, xx)
        this.drawTimeProgress({
            img: xx,
            sx: 0,
            dx: 0,
            drawWidth: this.imgUnit * diffTimeLong
        })
        // 空闲时间轴（营业基础状态）
        const startValue = dayjs.unix(info.timeline.startAt).valueOf()
        const endValue = dayjs.unix(info.timeline.endAt).valueOf()
        // console.log(startTimeLine)
        this.drawProgress.apply(this, [startValue, endValue, 1, startTimeLine])
        for(let i = 0; i < info.timePeriods.length; i++) {
            const timePeriods = info.timePeriods[i]
            const startAt = dayjs.unix(timePeriods.startAt).valueOf()
            const endAt = dayjs.unix(timePeriods.endAt).valueOf()
            const status = timePeriods.status
            // console.log(timePeriods, status)
            this.drawProgress.apply(this, [startAt, endAt, status, startTimeLine])
        }
    }

    drawProgress(start, end, status, startTimeLine) {
        let startPoi: number = 0
        let endPoi: number = 0
        if (start >= startTimeLine) {
            startPoi = (start - startTimeLine) * this.imgUnit
        } else {
            // console.log(start, startTimeLine, status)
            console.log('开始时间小于8:00am')
        }
        // console.log(end, start, endPoi, this.imgUnit)
        endPoi = (end - start) * this.imgUnit
        this.drawTimeProgress({
            img: this.imgMap[status],
            sx: startPoi,
            dx: startPoi,
            drawWidth: endPoi
        })
    }
    initCanvas() {
        const query = Taro.createSelectorQuery().in(this.$scope)
        query.select('#timeLine')
        .fields({ node: true, size: true })
        .exec((dom) => {
            const canvas = dom[0].node
            this.ctx = canvas.getContext('2d')
            // const dpr = Taro.getSystemInfoSync().pixelRatio
            this.loadedImg(canvas).then(res => {
                this.imgs = res
                const { xx, kx, fm, ym } = this.imgs
                this.drawHeight = xx.height
                this.drawWidth = xx.width
                this.imgMap = [xx, kx, fm, ym]
                canvas.width = this.drawWidth
                canvas.height = this.drawHeight
                this.drawCanvas()
            })
        })
    }

    private imgs: any = {}
    private imgMap: any = []
    private drawWidth: number = 0
    private drawHeight: number = 0
    private imgUnit: number = 0
    private ctx: any
    private mapSelect = {}
    private currData = {}

    drawTimeProgress(draw) {
        this.ctx.drawImage(draw.img, draw.sx, 0, draw.drawWidth, draw.img.height, draw.dx, 0, draw.drawWidth, draw.img.height)
    }

    createImg(cvs, src) {
        const img = cvs.createImage()
        img.src = src
        return img
    }
    loadedImg(canvas) {
        const fm = this.createImg(canvas, fmPic)
        const kx = this.createImg(canvas, kxPic)
        const xx = this.createImg(canvas, xxPic)
        const ym = this.createImg(canvas, ymPic)
        return new Promise(resolve => {
            for(let i = 0; i < 4; i++) {
                var imgs = [fm, kx, xx, ym]
                imgs[i].onload = function() {
                    if (i === 3) {
                        resolve({
                            fm,
                            kx,
                            xx,
                            ym
                        })
                    }
                }
            }
        })
    }
    render() {
        return (
            <View className='time-line-wrap'>
                <Canvas className='time-line' type='2d' id='timeLine' ></Canvas>
            </View>
        )
    }
}
